<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>岗位收藏</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../common/css/bootstrap.css" type="text/css">
        <link href="../../common/css/nice-select.css" rel="stylesheet">
        <link href="../../common/css/style.css" rel="stylesheet">
        <link rel="stylesheet" href="../../common/css/layui.css">
        <script src="../js/jquery-3.6.0.js"></script>
        <script src="../js/bootstrap.js"></script>
        <script src="../js/commons.js"></script>
        <script src="../../common/js/layui.js"></script>
        <style type="text/css">
            a {
                text-decoration: none;
            }

            table {
                border-collapse: collapse;
                width: 100%;
                font-size: 14px;
            }

            th {
                background-color: #ddd;
            }

            table, td, th {
                border: 1px solid #e7e8ec;
            }

            th, tr {
                height: 40px;
            }

            td {
                text-align: center;
            }

            tr:hover {
                background-color: #f9f4f3;
            }

            .barcon {
                width: 1000px;
                margin: 0 auto;
                text-align: center;
            }

            .barcon2 {
                float: right;
            }

            .barcon2 ul {
                margin: 20px 0;
                padding-left: 0;
                list-style: none;
                text-align: center;
            }

            .barcon2 li {
                display: inline;
            }

            .barcon2 a {
                font-size: 16px;
                font-weight: normal;
                display: inline-block;
                padding: 5px;
                padding-top: 0;
                color: black;
                border: 1px solid #ddd;
                background-color: #fff;
            }

            .barcon2 a:hover {
                background-color: #eee;
            }

            .head {
                width: auto;
                height: 60px;
                border: 1px solid cadetblue;
                text-align: right;
            }

            .head1 {
                border-radius: 90px;
                font-size: 20px;
                border: 1px cadetblue solid;
                text-align: right;
                cursor: pointer;
            }

            .head1:hover {
                color: #00D7C6;
            }

            #showData {
                width: 80%;
                margin: 20px auto;
                display: flex;
                justify-content: center;
                flex-wrap: wrap-reverse;
            }

            .address, .cname {
                display: inline-block;
                width: 100px;
                margin-left: 20px;
                font-size: 13px;
            }

            .salary {
                margin-left: 100px;
                font-size: 13px;
                color: #F85A4E;
            }

            .type {
                margin-left: 100px;
                font-size: 13px;
            }

            .jname {
                font-size: 16px;
                margin-left: 20px;
            }

            .jobitem {
                margin: 20px 60px 10px;
                border-radius: 10px;
                width: 350px;
                height: 150px;
                background-color: #FFFFFF;
                cursor: pointer;
                padding: 5px;
            }

            .jobitem:hover .jname {
                color: #00a6a7;
            }

            .jobitem:hover {
                box-shadow: 0 16px 40px 0 rgb(138 149 158 / 20%);
            }
        </style>
    </head>
    <body>
        <div class="head">
            <ul class="layui-nav layui-bg-green">
                <li class="layui-nav-item"><a href="main.html">首页</a></li>
                <li class="layui-nav-item"><a href="defaultJob.html">职位</a></li>
                <li class="layui-nav-item"><a href="../../common/html/resume.html">简历</a></li>
                <li class="layui-nav-item" onclick="chat()">
                    <a href="javascript:;">消息</a>
                </li>
                <li class="layui-nav-item">
                    <div style="margin-left: 5px;">
                        <span class="head1 state" id="aa" onclick="login()">登录</span>
                        <span class="head1 state1" id="aaa" onclick="toUserPage()" style="display: none"></span>
                    </div>
                </li>
            </ul>
        
        </div>
        <div id="showData">
    
        </div>
        <div id="barcon" class="barcon">
            <div id="barcon2" class="barcon2">
                <ul>
                    <li><a onclick="first()">首页</a></li>
                    <li><a id="prePage" onclick="pre()">上一页</a></li>
                    <li id="barcon1"></li>
                    <li><a id="nextPage" onclick="next()">下一页</a></li>
                    <li><a onclick="end()">尾页</a></li>
                    <li><input type="text" id="num" size="2" oninput="value=value.replace(/[^\d]/g,'')"></li>
                    <li><a id="jumpPage" onclick="jumpPage()">跳转</a></li>
                </ul>
            </div>
        </div>
        
        <script>
            var INDEX = "http://localhost:8080/recruit/";
            let activeUser;
            $.ajax({
                url: INDEX + "user/info",
                headers: {"token": localStorage.getItem("token")},
                success: function (result) {
                    if (result.code == 0) {
                        activeUser = result.data;
                        if (activeUser == null) {
                            $(".state1").css("display", "none");

                        } else {
                            $(".state").css("display", "none");
                            $(".state1").css("display", "block");
                            $(".state1").text(activeUser.nickname == null ? activeUser.username : activeUser.nickname);
                        }
                    } else {
                        window.location.href = "../../common/html/login.html";
                    }
                }
            })

            var pageList;
            $(function () {
                initTable(1);
            })

            function pre() {
                initTable(pageList.page - 1);
                if (pageList.page - 1 > 0) {
                    $("#num").val(pageList.page - 1);
                }

            }

            function next() {
                initTable(pageList.page + 1);
                if (pageList.page + 1 <= pageList.pageCount) {
                    $("#num").val(pageList.page + 1);
                } else {
                    $("#num").val(pageList.pageCount);
                }

            }

            function first() {
                initTable(1);
                if (pageList.page - 1 > 0) {
                    $("#num").val(1);
                }
            }

            function end() {
                initTable(pageList.pageCount);
            }

            function initTable() {
                $.ajax({
                    url: INDEX + "seeker/job/checkCollect",
                    headers: {"token": localStorage.getItem("token")},
                    type: "get",
                    success: function (result) {
                        if (result.code == 0) {
                            pageList = result.data;
                            let a = "";
                            $.each(result.data.data, function (index, ele) {
                                a += '<div class="jobitem"  onclick="detail(' + ele.jid + ')" >';
                                a += '<span class="jname">' + ele.jname + '</span>';
                                a += '<br><br>';
                                a += '<span class="address">' + ele.workAddress + '</span>';
                                a += '<span class="salary">' + ele.minSalary + ' - ' + ele.maxSalary + '</span>';
                                a += '<br><br>';
                                a += '<span class="cname">' + ele.cname + '</span>';
                                a += '<span class="type">' + ele.type + '</span>';
                                a += '</div>';
                            })
                            $("#showData").html(a);
                        }
                    }
                })
            }

            function jumpPage() {
                var num = parseInt($("#num").val());
                if (!isNaN(num) && num > 0) {
                    if (num > pageList.pageCount) {
                        num = pageList.pageCount;
                        $("#num").val(num);
                    }
                    initTable(num);
                }
            }

            function detail(jid) {
                $.ajax({
                    url: URL + "seeker/job/detail?jid=" + jid,
                    type: "get",
                    success: function (result) {
                        if (result.code == 0) {
                            sessionStorage.setItem("job", JSON.stringify(result.data));
                            window.location.href = "detail.html";
                        }
                    }
                })
            }

            function chat() {
                window.location.href = "package/html/chat.html";
            }

            function login() {
                window.location.href = "../../common/html/login.html";
                window.event.returnValue = false;
            }

            function toUserPage() {
                window.location.href = "seekers.html";
            }
        </script>
    
    </body>
</html>